<template>
  <div class="grid-box">
    <cardPanel title="网格情况">
      <div class="grid-content">
        <el-carousel style="height: 100%" :autoplay="false">
          <el-carousel-item v-for="(item, index) in gridList" :key="index">
            <div class="grid-body">
              <div class="grid-item" v-for="(grid, j) in item" :key="j">
                <span class="person-photo">
                  <img :src="grid.url" />
                </span>
                <div class="grid-item-info">
                  <label>网格名称</label>
                  <p>{{ grid.gridName }}</p>
                </div>
                <div class="grid-item-info">
                  <label>负责人员</label>
                  <p>{{ grid.name }}</p>
                </div>
                <div class="grid-item-info">
                  <label>联系方式</label>
                  <p>{{ grid.phone }}</p>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
// 网格情况
import cardPanel from "@/components/cardPanel/index.vue";
import person1 from '@/assets/image/network/person1.jpg';
import person2 from '@/assets/image/network/person2.jpg';
import person3 from '@/assets/image/network/person3.jpg';
import person4 from '@/assets/image/network/person4.jpg';
import person5 from '@/assets/image/network/person5.jpg';
import person6 from '@/assets/image/network/person6.jpg';

const gridList = [
  [
    {
      gridName: "网格一",
      name: "张三",
      phone: "187****205",
      url: person1
    },
    {
      gridName: "网格二",
      name: "李建国",
      phone: "187****205",
      url: person2
    },
    {
      gridName: "网格三",
      name: "张正",
      phone: "187****205",
      url: person3
    },
    {
      gridName: "网格四",
      name: "苏妲己",
      phone: "187****205",
      url: person4
    },
  ],
  [
    {
      gridName: "网格五",
      name: "宋江",
      phone: "187****205",
      url: person5
    },
    {
      gridName: "网格六",
      name: "吴长征",
      phone: "187****205",
      url: person6
    },
  ],
];
</script>

<style lang="scss">
.grid-content {
  .el-carousel__container {
    height: 100%;
  }
}
</style>

<style lang="scss" scoped>
.grid-box {
  width: 360px;
  height: 452px;
  margin-bottom: 10px;
}
.grid-content {
  height: 100%;
}

.grid-body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .grid-item {
    width: 48%;
    height: 172px;
    background: url("../../../assets/image/network/person-bg.png") no-repeat 0 0;
    background-size: 100% 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.person-photo {
  width: 64px;
  height: 80px;
  background: #24c9ff1a;
  border: 1px solid;
  border-image: linear-gradient(0deg, #24c9ff80, #24c9ff80) 10 10;
  margin: 10px 0;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.grid-item-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 15px;
  font-size: 12px;
  p{
    font-weight: 600;
    color: #31e9ff;
  }
}
</style>
